<template>
	<div class="inOutyunshu" ref='inOutyunshu'>
		<h2 class="titleSelf">{{thatYear}}年跨境出口运输方式统计</h2>
		<div class="contentSelf">
			<div class="danwei">
				<span>占比：</span>
				<span>货值</span>
			</div>
			<div ref="inOutyunshuChart" class="inOutyunshuChart"></div>
			<!-- <div class="textWrap">
				<span>{{commonFunction.formatNumberRgx(totalGV)}}</span>
				<div>
					<span>总业务金额 (万元)</span>
					<span></span>
				</div>
			</div> -->
		</div>

	</div>

</template>

<script>
	export default {
		name: 'inOutyunshu',
		components: {

		},
		data() {
			return {
				thatYear:new Date().getFullYear()-1,
				totalGV: 0
			}
		},
		mounted() {
			var that = this;
			that.getEchartData()
			setInterval(function() {
				that.getEchartData()
			}, 30000)

		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate()
			// 获取明天that.commonFunction.getTomorrowDate();

			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy()
			getEchartData() {
				const inOutyunshuChart = this.$refs.inOutyunshuChart;
				if (inOutyunshuChart) {
					const myChart = this.$echarts.init(inOutyunshuChart)
					var that = this;
					var startDate = that.commonFunction.getLastYearYestdy()[0];
					// console.log(startDate)
					that.$myHttp.get("getExportTransportTypeInfo", {
						params: {
							start: startDate,
							end: startDate +1,
							dtype: "Y"
						}
					}).then(function(data0) {
						if (data0.status == "200") {

							var getDatas = data0.data.result.ExportTransportTypeData;
							// console.log(getDatas)
							var img =
								'';
							// var getDatas = [{
							// 		name: "cgl航空",
							// 		gross: "9335548.73070",
							// 		gross_zhanbi: "0.3822",
							// 		gv: "4047648851.88143",
							// 		gv_zhanbi: "0.3290",
							// 	},
							// 	{
							// 		name: "非cgl航空",
							// 		gross: "9335548.73070",
							// 		gross_zhanbi: "0.3822",
							// 		gv: "4000000000.88143",
							// 		gv_zhanbi: "0.3290",
							// 	}, {
							// 		name: "陆运",
							// 		gross: "630679.08800",
							// 		gross_zhanbi: "0.0258",
							// 		gv: "206127554.56504",
							// 		gv_zhanbi: "0.0168",
							// 	}, {
							// 		name: "其他",
							// 		gross: "9335548.73070",
							// 		gross_zhanbi: "0.3822",
							// 		gv: "47648851",
							// 		gv_zhanbi: "0.3290",
							// 	}
							// ]
							
							var nameArr = [];
							var airNum = 0;
							var landNum = 0;
							var qitaNum = 0;
							
							var dataTotal = [];
							var inerArr = [];
							var outArr = [];
							getDatas.forEach((item, index) => {
								outArr.push({
									name: item.name,
									value:  item.gv
								})
								if (item.name.indexOf("航空") != -1) {
									
									airNum += parseFloat(item.gv)
									if (nameArr.indexOf("航空") == -1) {
										nameArr.push("航空")
									}
								}
								if (item.name.indexOf("陆运") != -1) {
									landNum += parseFloat(item.gv)
									if (nameArr.indexOf("陆运") == -1) {
										nameArr.push("陆运")
									}
							
								}
								if (item.name.indexOf("其他") != -1) {
									qitaNum += parseFloat(item.gv)
									if (nameArr.indexOf("其他") == -1) {
										nameArr.push("其他")
									}
								}
							})
							dataTotal=[airNum,landNum,qitaNum]
							// console.log(nameArr,dataTotal);
							that.totalGV =((airNum+landNum+qitaNum)/10000).toFixed(0)
							nameArr.forEach((item, index) => {
								inerArr.push({
									name: item,
									value: dataTotal[index]
								})
							})
							let echartData = {
							 inner: inerArr,
							 outer: outArr
							}
							// console.log(echartData)
							
							
							// let echartData = {
							// 	inner: [{
							// 			value: 1000,
							// 			name: '航空'
							// 		},
							// 		{
							// 			value: 600,
							// 			name: '陆运'
							// 		},
							
							// 		{
							// 			value: 500,
							// 			name: '其他'
							// 		}
							// 	],
							// 	outer: [{
							// 			value: 800,
							// 			name: 'cgl航空'
							// 		},
							// 		{
							// 			value:200,
							// 			name: '非cgl航空'
							// 		},
							// 		{
							// 			value: 600,
							// 			name: '陆运'
							// 		},
									
							// 		{
							// 			value: 500,
							// 			name: '其他'
							// 		}
							// 	]
							// }
							
							let legend1 = echartData.inner.map(v => v.name);
							let legend2 = echartData.outer.map(v => v.name);
							let legendData = [...legend1, ...legend2];
							
							const option = {
								// color: ["#fec413", "#01ffea", "#52a3ff", "#3695ff"],
								
								tooltip: {
									trigger: 'item',
									formatter: "{a} <br/>{b}: {c} ({d}%)"
								},
								legend: {
									show: true,
									icon: "plain",
									top: "40%",
									right: '15%',
									orient: 'vertical',
									"itemWidth": that.commonFunction.fontSize(0.2),
									"itemHeight": that.commonFunction.fontSize(0.1),
									"itemGap": that.commonFunction.fontSize(0.1),
									data: echartData.inner,
									formatter: (name) => {
										var text;
										echartData.inner.forEach((item, index) => {
											if (item.name == name) {
												// console.log(item)
											
												text = "{title|" + item.name + "}  {value|" + that.commonFunction.formatNumberRgx((item.value/10000).toFixed(0))  + "}{danwei| 万元}";
											}
										})
										return text;
									},
									textStyle: {
										rich: {
											title: {
												fontSize:that.commonFunction.fontSize(0.14),
												lineHeight: 20,
												color: "#00ffe9"
											},
											value: {
												fontSize: that.commonFunction.fontSize(0.14),
												lineHeight: that.commonFunction.fontSize(0.2),
												color: "#fcb719",
												padding: [0, 0, 0, that.commonFunction.fontSize(0.05)],
												 
											},
											danwei: {
												fontSize: that.commonFunction.fontSize(0.1),
												color: "#fcb719",
												padding: [0, 0, 0, that.commonFunction.fontSize(0.05)],
											}
										}
									}
								},
								graphic: {
									elements: [{
										type: "image",
										z: 3,
										style: {
											image: img,
											width: that.commonFunction.fontSize(1.4),
											height: that.commonFunction.fontSize(1.4)
										},
										left: '13%',
										top: 'center',
										// position: [100, 100]
									}]
								},
								series: [{
										name: '',
										color: ["#0078ff", "#fec413", "#01ffea"],// #263ff9 #21a3ff 
										type: 'pie',
										radius: [0, '25%'],
										center: ['28%', '50%'],
										minAngle: 25,
										startAngle: 100,
										itemStyle: {
											normal: {
												// borderColor: '#fff',
												// borderWidth: 2
											}
										},
										label: {
											normal: {
												show: false,
												position: 'inner',
												color: '#e6e6e6',
											}
										},
										labelLine: {
											normal: {
												show: false
											}
										},
										z: 10,
										data: echartData.inner,
										
									},
									{
										name: '',
										color: ["#21a3ff",'#263ff9 ', "#fec413", "#01ffea"],//  
										type: 'pie',
										radius: ['30%', '60%'],
										center: ['28%', '50%'],
										minAngle: 25,
										startAngle: 100,
										data: echartData.outer,
										z: 2,
										label: {
											normal: {
												formatter: params => {
													var nameTxt = ''
													// console.log(params.name)
													if(params.name=="非cgl航空"){
														nameTxt = "其他航空"
													}else if(params.name=="cgl航空"){
														nameTxt = "CGL包机"
													}else{
														nameTxt = params.name
													}
													return (
														' {percent|' + params.percent.toFixed(2) + '%}' +
														'\n{name|' + nameTxt + '}'
													);
												},
												padding: [0, 0, 0, 0],
												rich: {
										
													name: {
														fontSize: that.commonFunction.fontSize(0.12),
														color: '#fcb719',
													},
													percent: {
														color: '#fff',
														fontSize: that.commonFunction.fontSize(0.12),
														fontWeight: 'bold',
													}
												}
											}
										},
										labelLine: {
											normal: {
												length: that.commonFunction.fontSize(0.15),
												length2: that.commonFunction.fontSize(0.15),
												lineStyle: {
													color: '#e6e6e6',
													type: 'dashed',
										
												}
											}
										}
										
							
									}
								]
							};
							
							myChart.setOption(option)
							window.addEventListener("resize", function() {
								myChart.resize()
							})
							
							
							
						} else {
							alert("数据请求错误")
						}

					}).catch(function(error) {
						alert(error)
					});
					

				
				}
			}
		}
	}
</script>

<style scoped>
	.danwei{
			position: absolute;
			top: 0;
			right: 10%;
			display: flex;
			align-items: center;
			color:#07eee9 ;
			font-size: .14rem;
		}
	.inOutyunshu {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.inOutyunshuChart {
		width: 100%;
		height: 100%;
	}

	.textWrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fcb719;
		background: url(../../../../static/img/yunshubg.png) no-repeat;
		background-size: 100% 100%;
		width: 1.4rem;
		height: 0.7rem;
		position: absolute;
		top: .2rem;
		right: 9%;
	}

	.textWrap>span {
		font-size: .16rem;
		line-height: .26rem;
		font-weight: bold;
	}

	.textWrap>div {
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.textWrap>div>span:nth-of-type(1) {
		font-size: .14rem;
	}

	.textWrap>div>span:nth-of-type(2) {
		font-size: .12rem;
	}
</style>
